<template>
  <div>
    <x-header :right-options="{showMore: false}"  :left-options="{backText: ''}" @on-click-more="showMenus = true" class="mineheader">东亚联丰环球债券</x-header>
    <div class="productDetailA">
      <div class="chart1">
          <strong>{{financingData.income}}</strong>
          <span>累计总收益(元)</span>
      </div>
      <div class="chart2">
          <div class="zrsy">
            <div class="line"></div>
            <p>昨日收益(元)</p>
            <h3>{{financingData.yestdayIncome}}</h3>
          </div>
          <div class="zrsy">
            <div class="line"></div>
            <p>最新净值</p>
            <h3>{{financingData.newWorth}}</h3>
          </div>
          <div class="cyfe">
            <div class="line"></div>
            <p>持有份额(份)</p>
            <h3>{{financingData.haveShare}}</h3>
          </div>
      </div>
    </div>

    <div class="productDetailB">
      <div class="jzzs">
        <p>收益明细</p>
      </div>
      <div class="productchart">
        <v-chart :data="data" prevent-default>
          <v-scale x :tick-count="3" />
          <v-tooltip :show-item-marker="false" show-x-value />
          <v-line />
        </v-chart>
      </div>
    </div>

    <div class="detailInfoC">
      <div class="cpjs">
        <h2>产品详情</h2>
      </div>
      <div class="productList">
        <div class="dm">参考市值</div>
        <div class="dmt">{{financingData.market}}</div>
      </div>
      <div class="productList">
        <div class="dm">可用份额</div>
        <div class="dmt">{{financingData.useShare}}</div>
      </div>
      <div class="productList">
        <div class="dm">分红方式</div>
        <div class="dmt">{{financingData.shareRed}}</div>
      </div>
      <div class="productList zklv">
        <div class="dm">钞汇标志</div>
        <div class="dmt">{{financingData.landmark}}</div>
      </div>
    </div>
    <div class="flexbox1">
      <button class="flexitem1" @click="toFinancialShift">赎回</button>
      <div class="flexitem2" @click="toFinancialChange">转换</div>
      <div type="warn" class="flexitem3" @click="toFedeemMobil">追加购买</div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      financingData: {
        income: '',
        yestdayIncome: '',
        newWorth: '',
        haveShare: '',
        market: '',
        useShare: '',
        landmark: '',
        shareRed: ''
      },
      buttonTxt: '去开户' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    toFinancialShift: function () {
      this.$router.push({name: 'FinancialShift'})
    },
    toFinancialChange: function () {
      this.$router.push({name: 'FinancialChange'})
    },
    toFedeemMobil: function () {
      this.$router.push({name: 'FedeemMobil'})
    },
    getData () {
      let lvm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'H5overseasFinancinghhxA'}
        }),
        function (response) {
          alert('返回' + JSON.stringify(response))
          // this.financingData = response.data[0]
          // response是响应数据
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            lvm.financingData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    }
  },
  created () {
    this.getData()
  }

}
</script>
<style scoped>
.a, .b{
  width:100px;
  text-align: center;
  background: #ffffff;
}
</style>
<style lang="less" scoped>
.mineheader {
  background: rgba(61,71,123,1);
}
.productDetailB {
  width:100%;
  height:5.8rem;
  background:#fff;
  margin-top:0.2rem;
  .jzzs {
    width:100%;
    height:.8rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Bold;
    color:rgba(51,51,51,1);
    line-height:.8rem;
    border-bottom:1px solid #EAEAEA;
    p {
      margin-left:.3rem;
      color:#333;
    }
  }
}
.productDetailA {
  width: 100%;
  height: 2.6rem;
  color: #fff;
  .chart1 {
    height: 1.6rem;
    overflow: hidden;
    text-align: center;
    background: rgba(61,71,123,1);
    strong {
      // todo 此处需要用到 PingFang-SC-Bold 字体
      display: block;
      font-weight: normal;
      font-size: .45rem;
      color: #fff;
      margin-top: .24rem;
    }
    span {
      display: block;
      font-size: .2rem;
      margin-top: .21rem;
      color: rgba(255,255,255,1);
    }
  }
  .chart2 {
    display: flex;
    align-items: center;
    padding-left: .29rem;
    height: 1rem;
    background-color: #465184;
    p {
      font-size: .2rem;
      color: rgba(255,255,255,.6);
    }
    h3 {
      font-size: .28rem;
    }
    .zrsy {
      flex: 1;
      padding-left: .09rem;
      height:.7rem;
      border-left: 1px solid rgba(255,255,255,.6);
    }
    .cyfe {
      width: 1.78rem;
      height:.7rem;
      padding-left: .09rem;
      border-left: 1px solid rgba(255,255,255,.6);
    }
  }
}

.detailInfoC {
  padding: .2rem .3rem;
  background-color: #fff;
  .cpjs{
    width:100%;
    height:.8rem;
    font-family: PingFang-SC-Bold;
    color: rgba(51,51,51,1);
    line-height: .8rem;
    border-bottom: 1px solid #EAEAEA;
    h2 {
      font-size:0.3rem;
      font-weight: bold;
    }
  }
  .productList {
    line-height: 1rem;
    height: 1rem;
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
    .dm {
      width: 1.3rem;
      color: #999;
      font-size: .28rem;
      float: left;
    }
    .dmt {
      text-align: right;
      font-size: .28rem;
      float: right;
      .productxq {
        color: #3333FF;
        margin-right: 0.2rem;
        float: left;
      }
      .productjt {
        font-size: .28rem;
        float: right;
      }
    }
  }
  .zklv {
    border-bottom:0;
  }
}
.flexbox1 {
  display:flex;
  width:100%;
  height:1rem;
  border-top:1px solid #ccc;
  font-size:.34rem;
  .flexitem1 {
    flex:1;
    text-align: center;
    line-height:1rem;
    color:#333;
    border-right:1px solid #ccc;
  }
  .flexitem2 {
    flex:1;
    text-align: center;
    line-height:1rem;
    color:#EC1B30;
  }
  .flexitem3 {
    flex:1;
    text-align: center;
    line-height:1rem;
    background:rgba(236,27,48,1);
    color:#fff;
  }
}
</style>
